<template>
  <div class="shareList">
    <van-nav-bar title="面试技巧" left-arrow @click-left="onClickLeft" />
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
      shape="round"
      @focus="openSearch"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        @click="openDetail(item.id)"
        v-for="(item, index) in expList"
        :key="index"
      >
        <technicItem :item="item" />
      </div>
    </van-list>
  </div>
</template>

<script>
import technicItem from './shareItem.vue'
import { articlesShare } from '@/api/api.js'
export default {
  components: {
    technicItem
  },
  data () {
    return {
      value: '',
      loading: false,
      finished: false,
      expList: [],
      startnum: 0,
      tag: 'experience'
    }
  },
  methods: {
    openSearch () {
      this.$router.push(`/search/${this.tag}`)
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    async onLoad () {
      const res = await articlesShare({
        limit: 6,
        start: this.startnum
      })
      this.startnum += 6
      console.log(res)
      res.data.list.forEach(v => {
        v.author.avatar = process.env.VUE_APP_URL + v.author.avatar
      })
      this.expList = [...this.expList, ...res.data.list]
      this.loading = false
      if (res.data.list.length === 0) {
        this.finished = true
      }
    },
    openDetail (id) {
      this.$router.push(`/shareDetail/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.shareList {
  /deep/ .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
}
</style>
